<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 ECharts 绘制中国地图示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        #backButton {
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: none;
            /* 默认隐藏 */
        }

        #main {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <button id="backButton" onclick="backButtonClick()">返回</button>
    <script>
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById("main"));
        let chinaOption = null;
        // 注册中国地图
        fetch("./china_map.json")
            .then((response) => response.json())
            .then((china_map) => {
                console.log(china_map);
                let provinces = china_map.features.map((feature) => ({
                    name: feature.properties.name,
                    value: feature.properties.adcode,
                }));
                console.log(provinces);
                echarts.registerMap("china", china_map);
                // 指定图表的配置项和数据
                chinaOption = {
                    geo: [{
                            type: "map",
                            map: "china",
                            zlevel: -1,
                            aspectScale: 1,
                            zoom: 0.65,
                            layoutCenter: ["50%", "51%"],
                            layoutSize: "180%",
                            roam: false,
                            silent: true,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: "rgba(12,222,46,0.8)",
                                shadowColor: "rgba(11,217,169,0.5)",
                                shadowOffsetY: 5,
                                shadowBlur: 15,
                                areaColor: "rgba(5,21,35,0.1)",
                            },
                            // regions 可以单独设置省份颜色
                            // regions: [
                            //   {
                            //     name: "西藏",
                            //     itemStyle: {
                            //       areaColor: "transparent",
                            //       shadowColor: "rgba(30,30,44,1)",
                            //       shadowOffsetY: 15,
                            //       shadowBlur: 10,
                            //     },
                            //   },
                            // ],
                        },
                        {
                            type: "map",
                            map: "china",
                            zlevel: -2,
                            aspectScale: 1,
                            zoom: 0.65,
                            layoutCenter: ["50%", "52%"],
                            layoutSize: "180%",
                            roam: false,
                            silent: true,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: "rgba(12,177,227,0.6)",
                                shadowColor: "rgb(9,241,233)",
                                shadowOffsetY: 5,
                                shadowBlur: 15,
                                areaColor: "transpercent",
                            },
                        },
                        {
                            type: "map",
                            map: "china",
                            zlevel: -3,
                            aspectScale: 1,
                            zoom: 0.65,
                            layoutCenter: ["50%", "53%"],
                            layoutSize: "180%",
                            roam: false,
                            silent: true,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: "rgba(9,191,246,0.4)",
                                shadowColor: "rgb(22,121,111)",
                                shadowOffsetY: 15,
                                shadowBlur: 10,
                                areaColor: "transpercent",
                            },
                        },
                        {
                            type: "map",
                            map: "china",
                            zlevel: -4,
                            aspectScale: 1,
                            zoom: 0.65,
                            layoutCenter: ["50%", "54%"],
                            layoutSize: "180%",
                            roam: false,
                            silent: true,
                            itemStyle: {
                                borderWidth: 3,
                                // borderColor: "rgba(11, 43, 97,0.8)",
                                borderColor: "rgba(23,89,54,0.85)",
                                shadowColor: "rgba(34,100,34,0.8)",
                                shadowOffsetY: 15,
                                shadowBlur: 10,
                                areaColor: "rgba(5,21,35,0.1)",
                            },
                            // regions 可以单独设置省份颜色
                            // regions: [
                            //   {
                            //     name: "西藏",
                            //     itemStyle: {
                            //       areaColor: "transparent",
                            //       shadowColor: "rgba(30,30,44,1)",
                            //       shadowOffsetY: 15,
                            //       shadowBlur: 10,
                            //     },
                            //   },
                            // ],
                        },
                    ],
                    series: [{
                            type: "map",
                            map: "china",
                            aspectScale: 1, //长宽比
                            zoom: 0.65,
                            geoIndex: -1,
                            showLegendSymbol: false,
                            roam: false,
                            label: {
                                show: false,
                            },
                            itemStyle: {
                                areaColor: {
                                    type: "linear",
                                    x: 1200,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [{
                                            offset: 0,
                                            color: "rgba(20,41,41,0.8)", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(19,215,185,0.8)", // 50% 处的颜色
                                        },
                                    ],
                                    global: true, // 缺省为 false
                                },
                                borderColor: "rgba(19,215,185,1)",
                                borderWidth: 1,
                                shadowColor: "#19af5b",
                                shadowOffsetY: 10,
                                shadowBlur: 120,
                            },
                            layoutCenter: ["50%", "50%"],
                            layoutSize: "180%",
                            animation: false,
                            markPoint: {
                                symbol: "none",
                            },
                            emphasis: {
                                itemStyle: {
                                    areaColor: "rgba(0,254,233,0.2)",
                                },
                                label: {
                                    show: true,
                                    color: "rgba(0,254,233,0.6)",
                                },
                            },
                            select: {
                                disabled: true,
                            },
                            data: provinces,
                            // data: [
                            //   {
                            //     name: "西藏",
                            //     itemStyle: {
                            //       normal: {
                            //         label: {
                            //           color: "transparent",
                            //         },
                            //         areaColor: "transparent",
                            //         borderColor: "transparent",
                            //       },
                            //       emphasis: {
                            //         areaColor: "transparent",
                            //         borderColor: "transparent",
                            //       },
                            //     },
                            //   },
                            // ],
                        },
                        {
                            type: "effectScatter",
                            coordinateSystem: "geo",
                            data: [],
                            showEffectOn: "render",
                            rippleEffect: {
                                scale: 5,
                                brushType: "stroke",
                            },
                            label: {
                                formatter: "{b}",
                                position: "bottom",
                                show: false,
                                color: "#fff",
                                distance: 10,
                            },
                            symbol: "circle",
                            symbolSize: [15, 7],
                            itemStyle: {
                                color: "#16ffff",
                                shadowBlur: 10,
                                shadowColor: "#16ffff",
                                opacity: 1,
                            },
                            zlevel: 4,
                            emphasis: {
                                label: {
                                    show: true,
                                    position: "top",
                                    padding: 18,
                                    backgroundColor: {
                                        image: "./chinaMapToop.png",
                                    },
                                },
                            },
                        },
                        {
                            type: "lines",
                            zlevel: 2,
                            z: 1000,
                            effect: {
                                show: true,
                                period: 3, //箭头指向速度，值越小速度越快
                                trailLength: 0.5, //特效尾迹长度[0,1]值越大，尾迹越长重
                                symbol: "rect", //箭头图标
                                symbolSize: 1, //图标大小
                            },
                            lineStyle: {
                                color: "#00eaff",
                                width: 1, //尾迹线条宽度
                                opacity: 0, //尾迹线条透明度
                                curveness: 0.3, //尾迹线条曲直度
                            },
                            data: [],
                        },
                    ],
                };
                // 设置图表的配置项和数据
                myChart.setOption(chinaOption);

                myChart.on("click", function (params) {
                    console.log(params);
                    var provinceName = params.name;
                    loadProvinceMap(provinceName);
                });
            });

        const provinceMapFiles = {
            重庆市: "./province/chongqing.json",
            山西省: "./province/shanxi.json",
            山东省: "./province/shandong.json",
            北京市: "./province/beijing.json",
            上海市: "./province/shanghai.json",
            天津市: "./province/tianjing.json",
            河南省: "./province/henan.json",
            河北省: "./province/hebei.json",
            辽宁省: "./province/liaoning.json",
            黑龙江省: "./province/heilongjiang.json",
            吉林省: "./province/jilin.json",
            江苏省: "./province/jiangsu.json",
            浙江省: "./province/zhejiang.json",
            安徽省: "./province/anhui.json",
            福建省: "./province/fujian.json",
            江西省: "./province/jiangxi.json",
            湖北省: "./province/hubei.json",
            湖南省: "./province/hunan.json",
            广东省: "./province/guangdong.json",
            海南省: "./province/hainan.json",
            四川省: "./province/sichuan.json",
            贵州省: "./province/guizhou.json",
            云南省: "./province/yunnan.json",
            陕西省: "./province/shanxi1.json",
            甘肃省: "./province/gansu.json",
            青海省: "./province/qinghai.json",
            台湾省: "./province/taiwan.json",
            内蒙古自治区: "./province/neimenggu.json",
            广西壮族自治区: "./province/guangxi.json",
            西藏自治区: "./province/xizang.json",
            宁夏回族自治区: "./province/ningxia.json",
            新疆维吾尔自治区: "./province/xinjiang.json",
            香港特别行政区: "./province/xianggang.json",
            澳门特别行政区: "./province/aomen.json",
        };

        // 加载省份地图数据并切换地图
        function loadProvinceMap(provinceName) {
            console.log(provinceName);
            const provincePath = provinceMapFiles[provinceName];

            fetch(provincePath)
                .then((response) => response.json())
                .then((province_map) => {
                    console.log(province_map);
                    echarts.registerMap(provinceName, province_map);
                    var provinceOption = {
                        geo: [{
                                type: "map",
                                map: provinceName,
                                aspectScale: 1, //长宽比
                                zoom: 0.5,
                                showLegendSymbol: false,
                                roam: false,
                                label: {
                                    show: false,
                                },
                                itemStyle: {
                                    areaColor: {
                                        type: "linear",
                                        x: 1200,
                                        y: 0,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [{
                                                offset: 0,
                                                color: "rgba(20,41,41,0.8)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(19,215,185,0.8)", // 50% 处的颜色
                                            },
                                        ],
                                        global: true, // 缺省为 false
                                    },
                                    borderColor: "rgba(19,215,185,1)",
                                    borderWidth: 1,
                                    shadowColor: "#19af5b",
                                    shadowOffsetY: 10,
                                    shadowBlur: 120,
                                },
                                layoutCenter: ["50%", "50%"],
                                layoutSize: "180%",
                                animation: false,
                                markPoint: {
                                    symbol: "none",
                                },
                                emphasis: {
                                    itemStyle: {
                                        areaColor: "rgba(0,254,233,0.2)",
                                    },
                                    label: {
                                        show: true,
                                        color: "rgba(0,254,233,0.6)",
                                    },
                                },
                                select: {
                                    disabled: true,
                                },
                            },
                            {
                                type: "map",
                                map: provinceName,
                                zlevel: -1,
                                aspectScale: 1,
                                zoom: 0.5,
                                layoutCenter: ["50%", "51%"],
                                layoutSize: "180%",
                                roam: false,
                                silent: true,
                                itemStyle: {
                                    borderWidth: 1,
                                    borderColor: "rgba(12,222,46,0.8)",
                                    shadowColor: "rgba(11,217,169,0.5)",
                                    shadowOffsetY: 5,
                                    shadowBlur: 15,
                                    areaColor: "rgba(5,21,35,0.1)",
                                },
                            },
                            {
                                type: "map",
                                map: provinceName,
                                zlevel: -2,
                                aspectScale: 1,
                                zoom: 0.5,
                                layoutCenter: ["50%", "52%"],
                                layoutSize: "180%",
                                roam: false,
                                silent: true,
                                itemStyle: {
                                    borderWidth: 1,
                                    borderColor: "rgba(12,177,227,0.6)",
                                    shadowColor: "rgb(9,241,233)",
                                    shadowOffsetY: 5,
                                    shadowBlur: 15,
                                    areaColor: "transpercent",
                                },
                            },
                            {
                                type: "map",
                                map: provinceName,
                                zlevel: -3,
                                aspectScale: 1,
                                zoom: 0.5,
                                layoutCenter: ["50%", "53%"],
                                layoutSize: "180%",
                                roam: false,
                                silent: true,
                                itemStyle: {
                                    borderWidth: 1,
                                    borderColor: "rgba(9,191,246,0.4)",
                                    shadowColor: "rgb(22,121,111)",
                                    shadowOffsetY: 15,
                                    shadowBlur: 10,
                                    areaColor: "transpercent",
                                },
                            },
                            {
                                type: "map",
                                map: provinceName,
                                zlevel: -4,
                                aspectScale: 1,
                                zoom: 0.5,
                                layoutCenter: ["50%", "54%"],
                                layoutSize: "180%",
                                roam: false,
                                silent: true,
                                itemStyle: {
                                    borderWidth: 3,
                                    // borderColor: "rgba(11, 43, 97,0.8)",
                                    borderColor: "rgba(23,89,54,0.85)",
                                    shadowColor: "rgba(34,100,34,0.8)",
                                    shadowOffsetY: 15,
                                    shadowBlur: 10,
                                    areaColor: "rgba(5,21,35,0.1)",
                                },
                            },
                        ],
                        series: [], // 清空 series
                    };
                    myChart.clear(); // 清除当前图表
                    myChart.setOption(provinceOption); // 设置新的省份图表
                    document.getElementById("backButton").style.display = "block"; // 显示返回按钮
                });
        }

        // 返回按钮点击事件，加载中国地图并隐藏返回按钮
        const backButtonClick = () => {
            myChart.clear(); // 清除当前图表
            myChart.setOption(chinaOption);
            document.getElementById("backButton").style.display = "none"; // 隐藏返回按钮
        };
    </script>
</body>

</html>